<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨虹(MoHong)的个人介绍</title>
    <style>
        :root {
            --primary-color: #8a2be2;
            --secondary-color: #ff6b6b;
            --background-color: #f9f7fe;
            --text-color: #333;
            --card-bg: #ffffff;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            transition: all 0.3s ease;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }

        /* 语言切换模块 - 左上角 */
        .language-module {
            position: absolute;
            top: 10px;
            left: 20px;
            z-index: 100;
        }

        .lang-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: var(--shadow);
            font-size: 14px;
        }

        .lang-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        header {
            text-align: center;
            padding: 60px 0 40px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            margin-top: 20px;
        }

        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
            background-size: cover;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            margin: 0 auto 15px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }

        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
            
            header {
                padding: 50px 0 30px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }

        .card {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        h2 {
            color: var(--primary-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        h2 i {
            margin-right: 10px;
        }

        .language-list, .contact-list, .project-list {
            list-style-type: none;
        }

        .language-list li, .contact-list li, .project-list li {
            margin-bottom: 12px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .language-list li:hover, .contact-list li:hover, .project-list li:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }

        .language-list li::before, .contact-list li::before, .project-list li::before {
            content: "•";
            color: var(--primary-color);
            font-weight: bold;
            margin-right: 10px;
            font-size: 1.5rem;
        }

        .code-example {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            font-size: 0.9rem;
        }

        .contact-list a, .project-list a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .contact-list a:hover, .project-list a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .project-description {
            font-size: 0.9rem;
            color: #666;
            margin-top: 5px;
            line-height: 1.4;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #666;
            font-size: 0.9rem;
        }

        /* 修复语言切换样式 */
        .lang-zh {
            display: block;
        }

        .lang-en {
            display: none;
        }

        body.english .lang-zh {
            display: none;
        }

        body.english .lang-en {
            display: block;
        }

        /* 确保所有元素都支持语言切换 */
        p, span, strong, div, li {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 语言切换模块 -->
        <div class="language-module">
            <button class="lang-btn" id="langToggle">English</button>
        </div>

        <header>
            <div class="avatar">
                <img src="https://dl.yjwmidc.com/download/250826/logo.svg" alt="墨虹头像" 
                     onerror="this.style.display='none'; this.parentNode.innerHTML='墨'; this.parentNode.style.display='flex'; this.parentNode.style.alignItems='center'; this.parentNode.style.justifyContent='center'; this.parentNode.style.fontSize='48px'; this.parentNode.style.color='white';">
            </div>
            <h1><span class="lang-zh">墨虹 (MoHong)</span><span class="lang-en">MoHong (墨虹)</span></h1>
            <p class="subtitle"><span class="lang-zh">兽迷爱好者 & 编程学习者</span><span class="lang-en">Furry Enthusiast & Programming Learner</span></p>
        </header> 

        <div class="content">
            <div class="card">
                <h2><span class="lang-zh">👋 关于我</span><span class="lang-en">👋 About Me</span></h2>
                <p class="lang-zh">大家好，我是一名来自中国的兽迷爱好者。你们可以称呼我为"墨虹"、"mohong"，或者我的全称"MoHong•Jiao"。</p>
                <p class="lang-en">Hello everyone, I am a furry enthusiast from China. You can call me "墨虹," "mohong," or my full name "MoHong•Jiao".</p>
                
                <p class="lang-zh">我目前是一名八年级（初中二年级）的学生，没有太多精力投入到我热爱的编程中。</p>
                <p class="lang-en">I am currently a student in eighth grade (second year of middle school) and do not have much energy to dedicate to my passion for coding.</p>
            </div>

            <div class="card">
                <h2><span class="lang-zh">🚀 GH 项目</span><span class="lang-en">🚀 GH Projects</span></h2>
                <ul class="project-list">
                    <li>
                        <div>
                            <a href="https://mohong-furry.github.io/mohong-furry/MohongofWEB/git/" target="_blank">
                                <span class="lang-zh">Git命令查询系统</span>
                                <span class="lang-en">Git Command Query System</span>
                            </a>
                            <div class="project-description lang-zh">
                                一个方便的Git命令参考工具，帮助快速查找和使用Git命令
                            </div>
                            <div class="project-description lang-en">
                                A convenient Git command reference tool to quickly find and use Git commands
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="https://github.com/mohong-furry" target="_blank">
                                <span class="lang-zh">个人主页</span>
                                <span class="lang-en">Personal Homepage</span>
                            </a>
                            <div class="project-description lang-zh">
                                访问我的GitHub主页，查看所有项目和代码仓库
                            </div>
                            <div class="project-description lang-en">
                                Visit my GitHub homepage to view all projects and code repositories
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="card">
                <h2><span class="lang-zh">💻 编程技能</span><span class="lang-en">💻 Programming Skills</span></h2>
                <p class="lang-zh">我目前正在学习Python语法，并计划学习C语言和Java。</p>
                <p class="lang-en">I am currently learning Python syntax and plan to learn C language and Java.</p>
                
                <ul class="language-list">
                    <li>
                        <div>
                            <strong class="lang-zh">Python - 基础熟练</strong>
                            <strong class="lang-en">Python - Basic proficiency</strong>
                            <div class="code-example">print("Hello, World!")</div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <strong class="lang-zh">Shell - 熟悉基础语法</strong>
                            <strong class="lang-en">Shell - Familiar with basic syntax</strong>
                            <div class="code-example lang-zh">echo "熟悉基础语法（例如 pwd, cd, echo）"</div>
                            <div class="code-example lang-en">echo "Familiar with basic syntax (e.g., pwd, cd, echo)"</div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <strong class="lang-zh">HTML - 仅掌握纯HTML语法</strong>
                            <strong class="lang-en">HTML - Only know pure HTML syntax</strong>
                            <div class="code-example lang-zh">&lt;h1&gt;仅掌握纯HTML语法&lt;/h1&gt;</div>
                            <div class="code-example lang-en">&lt;h1&gt;Only know pure HTML syntax&lt;/h1&gt;</div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="card">
                <h2><span class="lang-zh">🗣️ 语言能力</span><span class="lang-en">🗣️ Language Skills</span></h2>
                <ul class="language-list">
                    <li>
                        <strong class="lang-zh">中文 - 母语</strong>
                        <strong class="lang-en">Chinese - Native</strong>
                    </li>
                    <li>
                        <span class="lang-zh"><strong>英语</strong> - 我的水平可能不是很好，因此您可能无法直接与我用英语交流</span>
                        <span class="lang-en"><strong>English</strong> - My level might not be very good, so you probably cannot communicate with me directly in English</span>
                    </li>
                </ul>
            </div>

            <div class="card">
                <h2><span class="lang-zh">📞 联系我</span><span class="lang-en">📞 Contact Me</span></h2>
                <p class="lang-zh">您可以通过以下方式联系我：</p>
                <p class="lang-en">You can contact me via:</p>
                
                <ul class="contact-list">
                    <li>
                        <span class="lang-zh">QQ: </span>
                        <span class="lang-en">QQ: </span>
                        <a href="tencent://message/?uin=2537456446">2537456446</a>
                    </li>
                    <li>
                        <span class="lang-zh">我的社群 (QQ群): </span>
                        <span class="lang-en">My community (QQ Group): </span>
                        <a href="https://qm.qq.com/q/qv9RK4Zm8" target="_blank">https://qm.qq.com/q/qv9RK4Zm8</a>
                    </li>
                </ul>
            </div>
        </div>

        <footer>
            <p class="lang-zh">© 2023 墨虹的个人博客 - 用代码创造美好</p>
            <p class="lang-en">© 2023 MoHong's Personal Blog - Creating Beauty with Code</p>
        </footer>
    </div>

    <script>
        document.getElementById('langToggle').addEventListener('click', function() {
            document.body.classList.toggle('english');
            
            if (document.body.classList.contains('english')) {
                this.textContent = '中文';
            } else {
                this.textContent = 'English';
            }
        });

        // 页面加载时确保正确显示语言
        document.addEventListener('DOMContentLoaded', function() {
            if (!document.body.classList.contains('english')) {
                document.getElementById('langToggle').textContent = 'English';
            }
        });
    </script>
</body>
</html>